JS - useful techniques

revision:


Content

some techniques that could make coding easier make JS more readable and extensible


some techniques that could make coding easier

top

use object instead of "switch"

examples
// ❌
                    <script>
                        const n = 1
                        let result
                        switch (n) {
                            case 1:
                                result = 'res-1'
                                break
                            case 2:
                                result = 'res-2'
                                break
                            case 3:
                                result = 'res-3'
                                break  
                            // ...There are a lot more
                        }
                    </script>    
                
// ✅
                </script>
                    const n = 1
                    const nMap = {
                        1: 'res-1',
                        2: 'res-2',
                        3: 'res-3'
                    }
                    const result = nMap[ n ]
                </script>
            

use the “includes” method instead of multiple “if”

examples
// ❌
                <script>
                    const n = 1
                    if (n === 1 || n === 2 || n === 3 || n === 4 || n === 5) {
                    // ...
                    }
                </script>    
            
// ✅
            </script>
                const n = 1
                const conditions = [ 1, 2, 3, 4, 5 ] // You just need to add new numbers here
                if (conditions.includes(n)) {
                // ...
                }
            </script>
        

use the default parameters of the ES6 function

examples
// ❌
                <script>
                    const func = (name) => {
                        name = name || 'fatfish'
                        console.log(name)
                    }
                </script>    
            
// ✅
                </script>
                    const func = (name = 'fatfish') => {
                        console.log(name)
                    }
                </script>
            

use “? … : …” instead of “if… else…”

examples
// ❌
                <script>
                    const n = 18
                    let result
                    if (n % 2 === 0) {
                        result = 'even number'
                    } else {
                        result = 'odd number'
                    }
                </script>    
            
// ✅
            </script>
                const n = 18
                let result = n % 2 === 0 ? 'even number' : 'odd number'    
            </script>
        

use “+” to convert string to number

examples
// ❌
                <script>
                    let str = '123'
                    let num = Number(str) // 123
                    let num2 = parseInt(str) // 123
                </script>    
            
// ✅
            </script>
                let str = '123'
                let num = +str // 123    
            </script>
        

use “JSON.stringify” to output prettier information

examples
// ❌
                <script>
                    const bigObj = {
                        name: 'fatfish',
                        obj: {
                            name: 'fatfish',
                            obj: {
                                name: 'fatfish',
                                obj: {
                                    name: 'fatfish',
                                    obj: {
                                        name: 'fatfish',
                                        // ...
                                    }
                                }
                            }
                        }
                    }
                    console.log(bigObj)
                </script>    
            
// ✅
            </script>
                const bigObj = {
                    name: 'fatfish',
                    obj: {
                    name: 'fatfish',
                    obj: {
                        name: 'fatfish',
                        obj: {
                        name: 'fatfish',
                        obj: {
                            name: 'fatfish',
                            // ...
                        }
                        }
                    }
                    }
                }
                console.log(JSON.stringify(bigObj, null, 2))
            </script>
        

initialize the array with “fill”

examples
// ❌
                <script>
                    let array = []
                    const len = 100
                    for(let i = 0; i < len; i++){
                    array[i] = 'fatfish'
                    }    
                </script>    
            
// ✅
            </script>
                let array = Array(100).fill('fatfish')
            </script>
        


make JS more readable and extensible

top

do not use the negative judgment condition

examples
// ❌
                <script>
                    const NEW_FOOD_TYPE = 1
                    const isNotNewFood = (food) => {
                    return food !== NEW_FOOD_TYPE
                    }
                    if (!isNotNewFood(food)) {
                        // ...
                    }
                </script>    
            
// ✅
            </script>
                const NEW_FOOD_TYPE = 1
                const isNewFood = (food) => {
                    return food === NEW_FOOD_TYPE
                }
                if (isNewFood(food)) {
                    // ...
                }
            </script>
        

stay away from the numbers

examples
// ❌
                <script>
                    const getUserInfo = (age) => {
                        return {
                            name: 'fatfish',
                            isMiddleAge: age >= 35
                        }
                    }
                </script>    
            
// ✅
            </script>
            const MIDDLE_AGE = 35
            const getUserInfo = (age) => {
                return {
                    name: 'fatfish',
                    isMiddleAge: age >= MIDDLE_AGE
                }
            }
                
            </script>
        

multiple judgment conditions

examples
// ❌
                <script>
                    if (age >= 18 && follwers >= 100 && (origin === 'Sweden' || origin === 'Switzerland'
                    || 'Latvia')) {
                        // ...
                    }
                </script>    
            
// ✅
            </script>
                const checkCanApplyMPP = (options) => {
                    const { age, follwers, origin } = options
                    const canApplyMPP = age >= 18 && follwers >= 100 && 
                    [ 'Sweden', 'Switzerland', 'Latvia' ].includes(origin)
                    
                    return canApplyMPP
                }
                
                if (checkCanApplyMPP({ age: 18, follwers: 99, origin: 'Sweden' })) {
                    // ...
                }
            </script>

            OR

            <script>
                const canApplyMPP = age >= 18 && follwers >= 100 && 
                [ 'Sweden', 'Switzerland', 'Latvia' ].includes(origin)

                if (canApplyMPP) {
                // ...
                }
            </script>
        

Reduce if…else noodle code

examples
// ❌
                <script>
                    const getPriceByName = (name) => {
                        if (name === '🍔') {
                            return 30
                        } else if (name === '🍨') {
                            return 20
                        } else if (name === '🍿') {
                            return 10
                        }
                    }
                    console.log(getPriceByName('🍔')) // 30
                    
                </script>    
            
// ✅
            </script>
                const getPriceByName = (name) => {
                    const foodMap = {
                    '🍔': 30,
                    '🍨': 20,
                    '🍿': 10,
                    // You can add new food here
                    // ...
                    }
                    return foodMap[ name ]
                }
                console.log(getPriceByName('🍔')) // 30
                
            </script>
        

use “filter" and "map” instead of “for” loops

examples
// ❌
                <script>
                const foods = [
                    {
                        name: '🍔',
                        group: 1,
                    },
                    {
                        name: '🍨',
                        group: 1,
                    },
                    {
                        name: '🍿',
                        group: 2,
                    },
                    {
                        name: '🍵',
                        group: 1,
                    },
                ]    
                const names = []
                for (let i = 0, len = foods.length; i < len; i++) {
                if (foods[ i ].group === 1) {
                    names.push(foods[ i ].name)
                }
                }

                </script>    
            
// ✅
                </script>
                    const foods = [
                            {
                                name: '🍔',
                                group: 1,
                            },
                            {
                                name: '🍨',
                                group: 1,
                            },
                            {
                                name: '🍿',
                                group: 2,
                            },
                            {
                                name: '🍵',
                                group: 1,
                            },
                    ]    
                    const names = foods
                        .filter((food) => food.group === 1)
                        .map((food) => food.name)
                    console.log(names) // [ '🍔', '🍨', '🍵' ]
                </script>
            

swap two values using destructuring

examples
// ❌
                <script>
                    let myFood = '🍔'
                    let yourFood = '🍫'
                    let tempFoot = myFood
                    myFood = yourFood
                    yourFood = tempFoot
                    console.log(myFood, yourFood) // 🍫 🍔
                </script>    
            
// ✅
            </script>
                let myFood = '🍔'
                let yourFood = '🍫'
                ;[ myFood, yourFood ] = [ yourFood, myFood ]
                console.log(myFood, yourFood) // 🍫 🍔
            </script>
        

smarter Object.entries

examples
// ❌
                <script>
                    const foodMap = {
                        '🍔': 30,
                        '🍨': 20,
                        '🍿': 10,
                        '🍫': 5
                    }
                    // pay attention here
                    Object.prototype['🌭'] = 40
                    for (const key in foodMap) {
                        console.log(key, foodMap[ key ])
                    }
                </script>    
            
// ✅
            </script>
                const foodMap = {
                    '🍔': 30,
                    '🍨': 20,
                    '🍿': 10,
                    '🍫': 5
                }
                // pay attention here
                Object.prototype['🌭'] = 40
                Object.entries(foodMap).forEach(([ key, value ]) => {
                    console.log(key, value) 
                })
            </script>
        

easy way to flatten an array

examples
// ❌
                <script>
                    const foods = [ [ '🍔', [ '🍫' ] ], [ '🍨', [ '🍿', [ '🍵' ] ] ] ]
                    const flattenFoods = (foods) => {
                        return foods.reduce((res, food) => {
                            return res.concat(Array.isArray(food) ? flattenFoods(food) : food)
                        }, [])
                    }
                    console.log(flattenFoods(foods)) // ['🍔', '🍫', '🍨', '🍿', '🍵']
                </script>    
            
// ✅
            </script>
                const foods = [ [ '🍔', [ '🍫' ] ], [ '🍨', [ '🍿', [ '🍵' ] ] ] ] 
                foods.flat(Infinity) // ['🍔', '🍫', '🍨', '🍿', '🍵']
            </script>
        

use reduce to calculate the sum

examples
// ❌
                <script>
                const foods = [
                    {
                        name: '🍔',
                        price: 30,
                        amount: 10,
                    },
                    {
                        name: '🍨',
                        price: 20,
                        amount: 3,
                    },
                    {
                        name: '🍿',
                        price: 10,
                        amount: 5,
                    },
                    {
                        name: '🍵',
                        price: 5,
                        amount: 9,
                    },
                ]
                let sum = 0
                foods.forEach((food) => {
                    sum += food.price * food.amount
                })
                console.log(sum) // 455
                                    
                </script>    
            
// ✅
                </script>
                    const foods = [
                        {
                        name: '🍔',
                        price: 30,
                        amount: 10,
                        },
                        {
                        name: '🍨',
                        price: 20,
                        amount: 3,
                        },
                        {
                        name: '🍿',
                        price: 10,
                        amount: 5,
                        },
                        {
                        name: '🍵',
                        price: 5,
                        amount: 9,
                        },
                ]
                let sum = foods.reduce((res, food) => res += food.price * food.amount, 0)
                console.log(sum) // 455   

                </script>